<template>
	<view class="container">
		<video style="width: 750rpx;" id="tui-video" :src="videoSrc" @onscroll="onscroll" @ondrop="ondrop" :initial-time="initialtime" :controls="controls" controls
			autoplay :custom-cache="false" @timeupdate="timeupdate" ></video>
		<view class="" style="padding: 30rpx 30rpx 0 30rpx;font-weight: 600;">
			{{tetalname}}
		</view>
		<view class="tui-container">
			<view class="tui-cmt-title">课程列表</view>
			<view class="" style="background: #FFFFFF;">
				<view style="display: flex;" :class="videolookindex==index?'zbx-kes1':'zbx-kes'" v-for="(item, index) in courseCatalogList" :key="item.index" @tap="videolook(item, index)">
					<view>第{{index+1}}讲:</view>
					<view style="display: inline-block;width: 400rpx;white-space: nowrap; text-overflow: ellipsis;overflow: hidden;flex: 1;">{{item.name}}</view>
					<view class="stocks1" v-if="item.isComplete==true">已完成</view>
					<view class="stocks" v-else >未完成</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js';
export default {
	mixins: [MescrollMixin],
	data() {
		return {
			type:0,//1试看 0不是看
			isKj: false, //是否快进过
			exitTime: '', //后退时间记录
			courseId: '', //课程的id
			courseCatalogId: '', //课程下面的每一个的item   id
			teacherId: '', //老师的id
			payTime: '', //存放播放中的时间
			criticismdata: '', //评论的总数据
			courseCatalogList: '',
			initialtime: '', //指定视频初始播放位置单位为秒（s）
			tetalname:'',//课程标题
			controls: false,
			videolookindex:0,//控制选中
			downOption: {
				auto: true //是否在初始化后,自动执行downCallback; 默认true
			},
			videoSrc: '' //视频的地址
		};
	},
	watch: {
		payTime(newValue, oldValue) {
			let difTime = newValue - oldValue;
			console.log(difTime);
			if (difTime > 2) {
				if (this.exitTime == '') {
					//表示没有后退过
					//表示在快进
					this.videoContext.seek(oldValue); //返回到快进前
					this.tui.toast('不能快进未观看的内容');
					this.isKj = true;
				} else {
					if (newValue > this.exitTime) {
						this.videoContext.seek(oldValue); //返回到快进前
						this.tui.toast('快进超过最长的时间');
						this.isKj = true;
					}
				}
			} else if (difTime < 0) {
				if (this.exitTime == '' || this.exitTime < oldValue) {
					if (!this.isKj) {
						this.exitTime = oldValue;
					} else {
						this.isKj = false;
					}
				}
			}
		}
	},
	onLoad: function(option) {
		console.log(option);
		this.videoSrc=uni.getStorageSync('videouil')
		// this.videoSrc = option.videoSrc == 'null' ? 'http://play.xsyaq.com/live/test2.flv' : option.videoSrc;
		this.courseId=option.courseId//课程id
		this.teacherId=option.teacherId//老师id
		this.courseCatalogId=option.courseCatalogId//课表id
		this.initialtime=option.payTime//存放播放中的时间
		this.videolookindex=option.indexd//控制选中
		this.tetalname=option.name
		this.payTime=this.initialtime//指定视频初始播放位置单位为秒（s）
		
		this.findMyCourseCatalog()
	},
	onReady: function(res) {
		this.videoContext = uni.createVideoContext('tui-video');
	},
	onUnload() {
		this.updateCoursePayTime();//获取课程列表
	},
	onBackPress(){
		console.log('aa')
		uni.$emit('aaa',{payTime:this.payTime})
	},
	methods: {
		onscroll(){
			console.log('被推动了')
		},
		onclick(){
			
		},
		findMyCourseCatalog() {
			this.api.findMyCourseCatalog({//获取课程列表
					courseId: this.courseId
				})
				.then(res => {
					this.courseCatalogList = res.records;
					console.log(res, '课程');
				});
		},
		timeupdate(v) {
			console.log(v.detail.currentTime);
			this.payTime = v.detail.currentTime;
		},
		endedVideo(){
			// 
			this.api.completeCourse({//获取课程列表
					courseId: this.courseId,
					courseCatalogId:this.courseCatalogId
				})
				.then(res => {
					console.log(res,'调用成功')
					this.findMyCourseCatalog()
				});
			console.log('视频结束')
		},
		
		updateCoursePayTime() {
			let recordtime = Math.floor(this.payTime);
			this.api
				.updateCoursePayTime({
					courseId: this.courseId,
					courseCatalogId: this.courseCatalogId,
					payTime: recordtime
				})
				.then(res => {
					console.log(res);
				});
		},
		videolook(e, index) {
			if(this.type==0){
			console.log(e);
			this.courseCatalogId = e.courseCatalogId;
			this.updateCoursePayTime();
			if (index == 0) {
				this.tetalname=e.name
				this.videolookindex=index
				this.videoSrc = e.url;
			} else if (this.courseCatalogList[index - 1].isComplete != 1) {
				this.tui.toast('前面视频尚未观看完');
			} else if (this.courseCatalogList[index].isComplete == 1) {
				this.tetalname=e.name
				this.videolookindex=index
				this.videoSrc = e.url;
			} else {
				this.tetalname=e.name
				this.videolookindex=index
				this.videoSrc = e.url;
			}
			
			}else{
				this.tui.toast('您只能试看当前视频');
			}
		}
	}
};
</script>

<style>
page {
	color: #333;
	background: #fff;
}

.container {
	box-sizing: border-box;
	padding-bottom: 110rpx;
}

.tui-container {
	padding: 30rpx 30rpx 30rpx 30rpx;
}

.tui-cmt-title {
	font-size: 30rpx;
	font-weight: bold;
	position: relative;
}
.zbx-kes {
	padding: 30rpx;
	font-size: 29rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: rgba(0, 0, 0, 1);
}
.zbx-kes1{
		padding: 30rpx;
		font-size:29rpx;
		font-family:PingFang SC;
		font-weight:500;
		color:rgba(78,153,54,1);
	}
	.stocks1 {
	width: 130rpx;
	height: 36rpx;
	background: rgba(78, 153, 54, 0.43);
	border-radius: 18rpx;
	line-height: 36rpx;
	text-align: center;
	font-size: 25rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: rgba(78, 153, 54, 1);
	display: inline-block;
	float: right;
}
.stocks {
	width: 130rpx;
	height: 36rpx;
	background: rgba(0, 0, 0, 1);
	opacity: 0.43;
	border-radius: 18rpx;
	line-height: 36rpx;
	text-align: center;
	font-size: 25rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #ffffff;
	display: inline-block;
	float: right;
}
.tui-cmt-title::after {
	content: '';
	position: absolute;
	left: -18rpx;
	top: 18%;
	width: 6rpx;
	height: 64%;
	background: #5677fc;
}
video::-webkit-media-controls-timeline {
	display: none;
}
</style>
